<template>
  <div class="home">
    <!-- 轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in lunboList" :key="item.id">
        <img :src="item.img" alt />
      </van-swipe-item>
    </van-swipe>
    <!-- 九宫格区域 -->
    <van-grid :column-num="3">
      <van-grid-item
        :icon="item.src"
        :text="item.title"
        v-for="item in gridList"
        :key="item.id"
        :to="item.to"
      />
    </van-grid>
  </div>
</template>

<script>
import { getLunbo, getGrids } from '../../api/home'
export default {
  data () {
    return {
      // 轮播图内容
      lunboList: [],
      // 九宫格内容
      gridList: []
    }
  },
  created () {
    this.getLunbo();
    this.getGrid();
  },
  methods: {
    async getLunbo () {
      const res = await getLunbo();
      this.lunboList = res.data.message;
    },
    async getGrid () {
      const res = await getGrids();
      this.gridList = res.data.message;
      console.log(res);
    }
  }
}
</script>

<style lang='scss' >
.home {
  .my-swipe {
    height: 200px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item__icon {
    font-size: 60px !important;
  }
}
</style>